<template>
	<view class="logo">
		<view class="logo_bar_bg">
			<view class="status_bar"></view>
			<view class="logo_bar" @click="backFn"><uni-icons type="arrowleft" class="arrowleft" color="#fff"></uni-icons><text class="back">返回</text></view>
			<view class="uniSegmentedControl">
				<view class="uniSegmentedControl_item" v-for="(items,index) in items"  :class="current==index?'active':''" @click='onClickItem(index)' :key="index">
					{{items}}
				</view>
			</view>
		</view>
		<view class="logo_form">
			<view class="quick_ogon" v-show="current==0">
				<view class="uni-form-item uni-column">
					<input class="uni-input" type="number" placeholder="请输入手机号" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" type="text" placeholder="请输入短信验证码" />
					<button class="shortBt" @click="shortBt"  plain="true">获取验证码</button>
				</view>
				<button type="warn" class="logoBt" @click="logoBtFn" plain="true">登录</button>
			</view>
			<view class="password_ogon" v-show="current==1">
				<view class="uni-form-item uni-column">
					<input class="uni-input" type="number" placeholder="请输入手机号" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" password type="text" placeholder="请输入账户密码" />
				</view>
				 <navigator url="./changePassword" class="navigator" hover-class="navigatorHover">忘记密码</navigator>
				<button type="warn" class="logoBt" @click="logoBtFn" plain="true">登录</button>
			</view>
		</view>  
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	
	export default {
		data() {
			return {
				items: ['快速登录','密码登录'],
				current: 0
			};
		},
		components: {
			uniIcons
		},
		methods:{
			//返回
			backFn(){
				uni.navigateBack();
			},
			//登录切换
			onClickItem(index) {
				this.current = index;
			},
			//获取短信码
			shortBt(){
				console.log('获取短信码')
			},
			//登录
			logoBtFn(){
				console.log('登录')
			}
		}
	}
</script>

<style lang="scss">
	.logo{
		.logo_bar_bg{
			background-image: url(../../static/img/bill_top_bg_375x245_@2x.png);
			.status_bar {
				height: var(--status-bar-height);
				width: 100%;
			}
			.logo_bar{
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				.arrowleft{
					font-size: 44rpx;
				}
				.back{
					position: relative;
					top: -5rpx;
				}
			}
			.uniSegmentedControl_item{
				width: 50%;
				height: 80rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				font-size: 32rpx;
				text-align: center;
				display: inline-block;
				position: relative;
			}
			.uniSegmentedControl_item.active:after{
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -15rpx;
				width: 0;
				height: 0;
				border-top: 15rpx solid transparent;
				border-left: 15rpx solid #fff;
				border-right: 15rpx solid transparent;
				border-bottom: 15rpx solid transparent;
				transform: rotateZ(-90deg);
			 }
		}
		.logo_form{
			.uni-column:first-child{
				margin-bottom: 20rpx;
			}
			.uni-input{
				height: 80rpx;
				line-height: 80rpx;
				border-bottom:1px solid #eaeaea ;
			}
			.quick_ogon{
				padding: 50rpx;
				.uni-column{
					position: relative;
					.shortBt{
						position: absolute;
						right: 0;
						top: 0;
						width: 210rpx;
						border-radius: 60rpx;
						height: 65rpx;
						line-height: 65rpx;
						font-size: 32rpx;
						background-color: #bbbbbb;
						border-color: #bbbbbb;
						color: #fff;
						transform: translateY(5rpx);
						padding: 0 10rpx;
					}
				}
			}
			.password_ogon{
				padding: 50rpx;
				.navigator{
					margin-top: 30rpx;
					font-size: 24rpx;
					color: #7d9dc3;
				}
				.navigatorHover{}
			}
			.logoBt{
				border-radius: 60rpx;
				margin-top: 100rpx;
				color: #ed915d;
				font-size: 36rpx;
				background-color: #f4c2a3;
				border-color: #f4c2a3;
			}
		}
	}
</style>
